<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <vxe-input
          v-model="searchFromData.name"
          @search-click="searchEvent"
          @keydown.capture.enter="searchEvent"
          @clear="searchEvent"
          placeholder="输入名称进行查询"
          type="search"
          clearable
        ></vxe-input>
        <!-- <vxe-form :data="searchFromData">
          <vxe-form-item field="name">
            <template #default="{ data }">
              <vxe-input
                v-model="data.name"
                v-on:keyup.enter.native="searchEvent()"
                placeholder="请输入名称进行搜索"
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
        </vxe-form>
        <vxe-button icon="vxe-icon-search" @click="searchEvent()">搜索</vxe-button> -->
        <vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-overflow
      ref="xTable"
      height="500"
      :loading="tableLoading"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      @cell-dblclick="cellDBLClickEvent"
    >
      <vxe-column type="seq" width="60" fixed="left"></vxe-column>
      <vxe-column field="name" title="名称" width="100" fixed="left"></vxe-column>
      <!-- <vxe-column field="password" title="密码" :formatter="formatterSex"></vxe-column> -->
      <vxe-column field="main" title="主类" width="100"></vxe-column>
      <vxe-column field="sub" title="亚类" width="130"></vxe-column>
      <vxe-column field="basic" title="基础类" width="100"></vxe-column>
      <vxe-column field="newMain" title="新主类" width="100"></vxe-column>
      <vxe-column field="newSub" title="新亚类" width="130"></vxe-column>
      <vxe-column field="newBasic" title="新基础类" width="100"></vxe-column>
      <vxe-column field="aggregate" title="所属集合" width="100"></vxe-column>
      <vxe-column field="city" title="市" width="100"></vxe-column>
      <vxe-column field="district" title="县或区" width="100"></vxe-column>
      <vxe-column field="township" title="乡镇" width="100"></vxe-column>
      <vxe-column field="address" title="地址" width="100"></vxe-column>
      <vxe-column field="longitude" title="经度" width="100"></vxe-column>
      <vxe-column field="latitude" title="维度" width="100"></vxe-column>
      <vxe-column field="source" title="来源" width="100"></vxe-column>
      <vxe-column field="grade" title="评级" width="100"></vxe-column>
      <vxe-column field="score" title="评分" width="100"></vxe-column>
      <vxe-column field="director" title="负责人" width="100"></vxe-column>
      <vxe-column title="操作" width="100" fixed="right" show-overflow>
        <template #default="{ row }">
          <vxe-button type="text" icon="vxe-icon-edit" @click="editEvent(row)"></vxe-button>
          <vxe-button type="text" icon="vxe-icon-delete" @click="removeEvent(row)"></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-pager
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.totalResult"
      @page-change="pageChange()"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>

    <vxe-modal
      v-model="showEdit"
      :title="selectRow ? '编辑&保存' : '新增&保存'"
      width="800"
      min-width="600"
      height="80vh"
      min-height="300"
      :loading="submitLoading"
      @close="resetFormData"
      resize
      destroy-on-close
    >
      <template #default>
        <vxe-form
          ref="xForm"
          :data="formData"
          :rules="formRules"
          title-align="right"
          title-width="100"
          @submit="submitEvent"
        >
          <vxe-form-item
            title="基础信息"
            title-align="left"
            :title-width="200"
            :span="24"
            :title-prefix="{ icon: 'vxe-icon-comment' }"
          >
          </vxe-form-item>
          <vxe-form-item field="name" title="名称" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入名称"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="main" title="主类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.main" placeholder="请选择主类">
                <vxe-option
                  v-for="item in mainList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="sub" title="亚类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.sub" placeholder="请选择亚类" clearable filterable>
                <vxe-option
                  v-for="item in subList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="basic" title="基础类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.basic" placeholder="请选择基础类" clearable filterable>
                <vxe-option
                  v-for="item in basicList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="newMain" title="新主类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.newMain" placeholder="请选择新主类">
                <vxe-option
                  v-for="item in newMainList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="newSub" title="新亚类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.newSub" placeholder="请选择亚类" clearable filterable>
                <vxe-option
                  v-for="item in newSubList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="newBasic" title="新基础类" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.newBasic" placeholder="请选择新基础类" clearable filterable>
                <vxe-option
                  v-for="item in newBasicList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="aggregate" title="所属集合" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.aggregate" placeholder="请输入所属集合"></vxe-input>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item field="flag1" title="是否单身" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-radio-group v-model="data.flag1">
                <vxe-radio label="Y" content="是"></vxe-radio>
                <vxe-radio label="N" content="否"></vxe-radio>
              </vxe-radio-group>
            </template>
          </vxe-form-item>
          <vxe-form-item field="checkedList" title="可选信息" :visible-method="visibleMethod" :span="24" :item-render="{}">
            <template #default="{ data }">
              <vxe-checkbox-group v-model="data.checkedList">
                <vxe-checkbox label="1" content="运动、跑步"></vxe-checkbox>
                <vxe-checkbox label="2" content="听音乐"></vxe-checkbox>
                <vxe-checkbox label="3" content="爬山"></vxe-checkbox>
                <vxe-checkbox label="4" content="吃美食"></vxe-checkbox>
              </vxe-checkbox-group>
            </template>
          </vxe-form-item> -->
          <vxe-form-item
            title="其他信息"
            title-align="left"
            :title-width="200"
            :span="24"
            :title-prefix="{ message: '请填写必填项', icon: 'vxe-icon-info-circle-fill' }"
          >
          </vxe-form-item>

          <vxe-form-item field="city" title="市" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.city" placeholder="请输入市"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="district" title="县或区" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.district" placeholder="请输入县或区" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="township" title="乡镇" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.township" placeholder="请输入乡镇" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="address"
            title="地址"
            :span="24"
            :item-render="{}"
            :title-suffix="{
              message: '请尽可能的输入详细地址',
              icon: 'vxe-icon-question-circle-fill'
            }"
          >
            <template #default="{ data }">
              <vxe-input v-model="data.address" placeholder="请输入地址" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="longitude" title="经度" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.longitude"
                type="number"
                placeholder="请输入经度"
                transfer
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="latitude" title="纬度" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.latitude"
                type="number"
                placeholder="请输入纬度"
                transfer
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="source" title="来源" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.source" placeholder="请输入来源" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="grade" title="评级" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.grade" placeholder="请选择评级" clearable>
                <vxe-option
                  v-for="item in gradeList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="score" title="评分" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.score"
                type="number"
                placeholder="请输入评分"
                transfer
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item field="director" title="负责人" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.director" placeholder="请输入负责人" transfer></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from 'vue'
import axios from 'axios'
import {
  VXETable,
  VxeTableInstance,
  // VxeColumnPropTypes,
  VxeFormPropTypes,
  // VxeFormItemPropTypes,
  VxeTableEvents,
  VxeFormInstance
} from 'vxe-table'

interface RowVO {
  id: number
  name: string
  main: string
  sub: string
  basic: string
  newMain: string
  newSub: string
  newBasic: string
  aggregate: string
  city: string
  district: string
  township: string
  address: string
  longitude: number
  latitude: number
  source: string
  grade: number
  score: number
  director: string
}

const xTable = ref<VxeTableInstance<RowVO>>()

const xForm = ref<VxeFormInstance>()

const tableLoading = ref(true)

const formData = reactive({
  id: null,
  name: '',
  main: '',
  sub: '',
  basic: '',
  newMain: '',
  newSub: '',
  newBasic: '',
  aggregate: '',
  city: '',
  district: '',
  township: '',
  address: '',
  longitude: null,
  latitude: null,
  source: '',
  grade: null,
  score: null,
  director: ''
})

const submitLoading = ref(false)
const showEdit = ref(false)
const selectRow = ref<RowVO | null>()
const tableData = ref<RowVO[]>([])

const mainList = ref([
  { label: '地文景观', value: '地文景观' },
  { label: '水域景观', value: '水域景观' },
  { label: '建筑与设施', value: '建筑与设施' },
  { label: '生物景观', value: '生物景观' },
  { label: '天象与气候景观', value: '天象与气候景观' },
  { label: '历史遗迹', value: '历史遗迹' }
])
const subList = ref([
  { label: '自然景观综合体', value: '自然景观综合体' },
  { label: '自然景观集合体', value: '自然景观集合体' },
  { label: '地表形态', value: '地表形态' },
  { label: '地质与构造形迹', value: '地质与构造形迹' },
  { label: '海面', value: '海面' },
  { label: '实用建筑与核心设施', value: '实用建筑与核心设施' },
  { label: '人文景观综合体', value: '人文景观综合体' },
  { label: '自然标记与自然现象', value: '自然标记与自然现象' },
  { label: '河系', value: '河系' },
  { label: '湖沼', value: '湖沼' },
  { label: '人文景观集合体', value: '人文景观集合体' },
  { label: '地下水', value: '地下水' },
  { label: '植被景观', value: '植被景观' },
  { label: '野生动物栖息地', value: '野生动物栖息地' },
  { label: '天象景观', value: '天象景观' },
  { label: '天气与气候现象', value: '天气与气候现象' },
  { label: '天气与气候景观', value: '天气与气候景观' },
  { label: '景观与小品建筑', value: '景观与小品建筑' },
  { label: '物质类文化遗存', value: '物质类文化遗存' }
])
const basicList = ref([
  { label: '山丘型景观', value: '山丘型景观' },
  { label: '沟谷型景观', value: '沟谷型景观' },
  { label: '台地型景观', value: '台地型景观' },
  { label: '沟壑与洞穴', value: '沟壑与洞穴' },
  { label: '滩地型景观', value: '滩地型景观' },
  { label: '断裂景观', value: '断裂景观' },
  { label: '小型岛礁', value: '小型岛礁' },
  { label: '堤坝段落', value: '堤坝段落' },
  { label: '地层剖面', value: '地层剖面' },
  { label: '建设工程与生产地', value: '建设工程与生产地' },
  { label: '岩土圈灾变遗迹', value: '岩土圈灾变遗迹' },
  { label: '奇异自然现象', value: '奇异自然现象' },
  { label: '垂直自然带', value: '垂直自然带' },
  { label: '游憩河段', value: '游憩河段' },
  { label: '游憩湖区', value: '游憩湖区' },
  { label: '港口、渡口与码头', value: '港口、渡口与码头' },
  { label: '湿地', value: '湿地' },
  { label: '潭池', value: '潭池' },
  { label: '康体游乐休闲度假地', value: '康体游乐休闲度假地' },
  { label: '泉', value: '泉' },
  { label: '林地', value: '林地' },
  { label: '独树与丛树', value: '独树与丛树' },
  { label: '草地', value: '草地' },
  { label: '花卉地', value: '花卉地' },
  { label: '陆地动物栖息地', value: '陆地动物栖息地' },
  { label: '鸟类栖息地', value: '鸟类栖息地' },
  { label: '太空景象观赏地', value: '太空景象观赏地' },
  { label: '地表光现象', value: '地表光现象' },
  { label: '云雾多发区', value: '云雾多发区' },
  { label: '物候景象', value: '物候景象' },
  { label: '景观农田', value: '景观农田' },
  { label: '景观牧场', value: '景观牧场' },
  { label: '景观养殖场', value: '景观养殖场' },
  { label: '渠道、运河段落', value: '渠道、运河段落' },
  { label: '特色屋舍', value: '特色屋舍' },
  { label: '教学科研实验场所', value: '教学科研实验场所' },
  { label: '社会与商贸活动场所', value: '社会与商贸活动场所' },
  { label: '交通运输场站', value: '交通运输场站' },
  { label: '桥梁', value: '桥梁' },
  { label: '文化活动场所', value: '文化活动场所' },
  { label: '特色店铺', value: '特色店铺' },
  { label: '特色街区', value: '特色街区' },
  { label: '独立场、所', value: '独立场、所' },
  { label: '形象标志物', value: '形象标志物' },
  { label: '亭、台、楼、阁', value: '亭、台、楼、阁' },
  { label: '堆石', value: '堆石' },
  { label: '门廓、廊道', value: '门廓、廊道' },
  { label: '景观步道、甬路', value: '景观步道、甬路' },
  { label: '陵墓', value: '陵墓' },
  { label: '建筑遗迹', value: '建筑遗迹' },
  { label: '宗教与祭祀活动场所', value: '宗教与祭祀活动场所' },
  { label: '军事遗址与古战场', value: '军事遗址与古战场' },
  { label: '纪念地与纪念活动场所', value: '纪念地与纪念活动场所' }
])
const newMainList = ref([
  { label: '01地文景观', value: '01地文景观' },
  { label: '05建筑与设施', value: '05建筑与设施' },
  { label: '06历史文化遗址遗迹', value: '06历史文化遗址遗迹' },
  { label: '02水域风光', value: '02水域风光' },
  { label: '03生物景观', value: '03生物景观' },
  { label: '04天象与气候景观', value: '04天象与气候景观' }
])
const newSubList = ref([
  { label: '0101山地沟谷类', value: '0101山地沟谷类' },
  { label: '0506景观建筑与小品', value: '0506景观建筑与小品' },
  { label: '0602政治与军事场所', value: '0602政治与军事场所' },
  { label: '0102河流地貌', value: '0102河流地貌' },
  { label: '0104黄土地貌', value: '0104黄土地貌' },
  { label: '0105丹霞地貌', value: '0105丹霞地貌' },
  { label: '0106沉积与构造', value: '0106沉积与构造' },
  { label: '0107自然变动遗迹', value: '0107自然变动遗迹' },
  { label: '0108自然标记与自然现象', value: '0108自然标记与自然现象' },
  { label: '0201河流', value: '0201河流' },
  { label: '0202湖泊与池沼', value: '0202湖泊与池沼' },
  { label: '0204泉', value: '0204泉' },
  { label: '0301植被景观', value: '0301植被景观' },
  { label: '0302野生动物栖息地', value: '0302野生动物栖息地' },
  { label: '0401光现象观察与观景地', value: '0401光现象观察与观景地' },
  { label: '0402天气与气候现象', value: '0402天气与气候现象' },
  { label: '0501农业生产设施与生产地', value: '0501农业生产设施与生产地' },
  { label: '0502工业生产设施与生产地', value: '0502工业生产设施与生产地' },
  { label: '0503服务业生产设施与生产地', value: '0503服务业生产设施与生产地' },
  { label: '0504生活设施与建筑', value: '0504生活设施与建筑' },
  { label: '0505公共文化设施与建筑', value: '0505公共文化设施与建筑' },
  { label: '0601生活与居住遗址遗迹', value: '0601生活与居住遗址遗迹' },
  { label: '0604宗教与祭祀场所', value: '0604宗教与祭祀场所' },
  { label: '0605 近现代重要事件旧址与纪念地', value: '0605 近现代重要事件旧址与纪念地' }
])
// 新基础类列表
const newBasicList = ref([
  { label: '010101山丘', value: '010101山丘' },
  { label: '050603塔型建筑', value: '050603塔型建筑' },
  { label: '060205烽火墩堠', value: '060205烽火墩堠' },
  { label: '010106沟谷', value: '010106沟谷' },
  { label: '010110冲、洪积扇', value: '010110冲、洪积扇' },
  { label: '010112台地', value: '010112台地' },
  { label: '010202切沟冲沟', value: '010202切沟冲沟' },
  { label: '010204河滩', value: '010204河滩' },
  { label: '010205阶地', value: '010205阶地' },
  { label: '010207洲、江心岛', value: '010207洲、江心岛' },
  { label: '010209堤坝段落', value: '010209堤坝段落' },
  { label: '010404典型黄土林', value: '010404典型黄土林' },
  { label: '010405典型黄土穴', value: '010405典型黄土穴' },
  { label: '010501丹霞山', value: '010501丹霞山' },
  { label: '010601断层', value: '010601断层' },
  { label: '010604地层剖面', value: '010604地层剖面' },
  { label: '010605矿点矿脉与矿石积聚地', value: '010605矿点矿脉与矿石积聚地' },
  { label: '010701重力堆积体', value: '010701重力堆积体' },
  { label: '010702地震遗迹', value: '010702地震遗迹' },
  { label: '010703陷落地', value: '010703陷落地' },
  { label: '010801奇异自然现象', value: '010801奇异自然现象' },
  { label: '010803水平交错地带', value: '010803水平交错地带' },
  { label: '020101景观河段', value: '020101景观河段' },
  { label: '020102河湾', value: '020102河湾' },
  { label: '020201湖区', value: '020201湖区' },
  { label: '020202沼泽与湿地', value: '020202沼泽与湿地' },
  { label: '020204水库', value: '020204水库' },
  { label: '020401冷泉（泉水）', value: '020401冷泉（泉水）' },
  { label: '030101林地', value: '030101林地' },
  { label: '030103独树与丛树', value: '030103独树与丛树' },
  { label: '030104草地', value: '030104草地' },
  { label: '030105草原', value: '030105草原' },
  { label: '030106花卉地', value: '030106花卉地' },
  { label: '030202陆地动物栖息地', value: '030202陆地动物栖息地' },
  { label: '030203鸟类栖息地', value: '030203鸟类栖息地' },
  { label: '040101日月星辰观景地', value: '040101日月星辰观景地' },
  { label: '040102光环现象观景地', value: '040102光环现象观景地' },
  { label: '040201云雾多发地', value: '040201云雾多发地' },
  { label: '040205物候景观', value: '040205物候景观' },
  { label: '050101景观农田', value: '050101景观农田' },
  { label: '050102景观梯田', value: '050102景观梯田' },
  { label: '050103景观果园', value: '050103景观果园' },
  { label: '050105景观蔬菜基地', value: '050105景观蔬菜基地' },
  { label: '050106景观牧场', value: '050106景观牧场' },
  { label: '050107景观养殖场', value: '050107景观养殖场' },
  { label: '050109酒庄与酒窖', value: '050109酒庄与酒窖' },
  { label: '050110灌渠', value: '050110灌渠' },
  { label: '050112传统农业设施与场所', value: '050112传统农业设施与场所' },
  { label: '050201工业园区', value: '050201工业园区' },
  { label: '050204新能源生产地', value: '050204新能源生产地' },
  { label: '050202工厂与车间', value: '050202工厂与车间' },
  { label: '050203特色作坊与加工地', value: '050203特色作坊与加工地' },
  { label: '050301教学科研场所', value: '050301教学科研场所' },
  { label: '050302社会与商贸活动场所', value: '050302社会与商贸活动场所' },
  { label: '050303交通运输服务设施', value: '050303交通运输服务设施' },
  { label: '050305乡村特色经营场所', value: '050305乡村特色经营场所' },
  { label: '050306酒店', value: '050306酒店' },
  { label: '050308特色市场', value: '050308特色市场' },
  { label: '050309特色店铺', value: '050309特色店铺' },
  { label: '050403特色街巷', value: '050403特色街巷' },
  { label: '050404特色社区', value: '050404特色社区' },
  { label: '050405医疗康体场所', value: '050405医疗康体场所' },
  { label: '050406游乐休闲场所', value: '050406游乐休闲场所' },
  { label: '050501文博院馆', value: '050501文博院馆' },
  { label: '050502体育场馆与体育休闲场所', value: '050502体育场馆与体育休闲场所' },
  { label: '050503文化广场', value: '050503文化广场' },
  { label: '050601标志物', value: '050601标志物' },
  { label: '050604亭、台、楼、阁', value: '050604亭、台、楼、阁' },
  { label: '050607土石景观小品', value: '050607土石景观小品' },
  { label: '050608景观步道、栈道、甬道', value: '050608景观步道、栈道、甬道' },
  { label: '050615陵墓', value: '050615陵墓' },
  { label: '060102古城遗址与聚落遗迹', value: '060102古城遗址与聚落遗迹' },
  { label: '060103历史文化街区', value: '060103历史文化街区' },
  { label: '060104宫殿建筑遗址', value: '060104宫殿建筑遗址' },
  { label: '060105名人故居', value: '060105名人故居' },
  { label: '060107祠堂', value: '060107祠堂' },
  { label: '060202重大军事事件发生地与遗址', value: '060202重大军事事件发生地与遗址' },
  { label: '060203长城遗址（迹）', value: '060203长城遗址（迹）' },
  { label: '060204军事与民防要塞遗址（迹）', value: '060204军事与民防要塞遗址（迹）' },
  { label: '060402宗教活动场所', value: '060402宗教活动场所' },
  { label: '060403石窟', value: '060403石窟' },
  { label: '060502重要历史人物和活动纪念地', value: '060502重要历史人物和活动纪念地' }
])
// 评级列表
const gradeList = ref([
  { label: '一级', value: 1 },
  { label: '二级', value: 2 },
  { label: '三级', value: 3 },
  { label: '四级', value: 4 },
  { label: '五级', value: 5 }
])

const formRules = reactive<VxeFormPropTypes.Rules>({
  name: [
    { required: true, message: '请输入名称' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
  ],
  main: [{ required: true, message: '请选择主类' }],
  city: [{ required: true, message: '请输入市的信息' }],
  grade: [{ required: true, message: '请选择评级' }]
})

// const formatterSex: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
//   const item = sexList.value.find((item) => item.value === cellValue)
//   return item ? item.label : ''
// }

// const visibleMethod: VxeFormItemPropTypes.VisibleMethod = ({ data }) => {
//   return data.flag1 === 'Y'
// }

interface SearchFormDataVO {
  name: string
}

const searchFromData = reactive<SearchFormDataVO>({
  name: ''
})

const openMessage = (options: any) => {
  VXETable.modal.message(options)
}

const searchEvent = () => {
  tableLoading.value = true
  axios
    .get('/api/attraction/page?name=' + searchFromData.name + '&pageSize=' + page.pageSize)
    .then((res) => {
      const { code, msg, data } = res.data
      if (code === 200) {
        page.currentPage = 1
        tableData.value = data.list as RowVO[]
        page.totalResult = data.total
        // xTable.value?.reloadData(list.value)
        tableLoading.value = false
        return
      }
      openMessage({ content: msg, status: 'error' })
    })
    .catch((error) => {
      openMessage({ content: '系统异常', status: 'error' })
      console.log(error)
      tableLoading.value = false
    })
}

const insertEvent = () => {
  selectRow.value = null
  showEdit.value = true
}

const editEvent = (row: RowVO) => {
  tableLoading.value = true
  axios
    .get('/api/attraction/' + row.id)
    .then((res) => {
      const { code, msg, data } = res.data
      if (code === 200) {
        Object.assign(formData, data)
        selectRow.value = data
        showEdit.value = true
        tableLoading.value = false
        return
      }
      openMessage({ content: msg, status: 'error' })
    })
    .catch((error) => {
      openMessage({ content: '系统异常', status: 'error' })
      console.log(error)
      tableLoading.value = false
    })
}

const cellDBLClickEvent: VxeTableEvents.CellDblclick<RowVO> = ({ row }) => {
  editEvent(row)
}

// const removeEvent = async (row: RowVO) => {
//   const type = await VXETable.modal.confirm('您确定要删除该数据?')
//   if (type === 'confirm') {
//     const $table = xTable.value
//     if ($table) {
//       $table.remove(row)
//     }
//   }
// }

const removeEvent = (row: RowVO) => {
  VXETable.modal.confirm('您确定要删除该数据?').then((res) => {
    if (res === 'confirm') {
      tableLoading.value = true
      axios
        .delete('/api/attraction?id=' + row.id)
        .then((res) => {
          const { code, msg } = res.data
          if (code === 200) {
            loadData()
            tableLoading.value = false
            openMessage({ content: '删除成功', status: 'success' })
            return
          }
          tableLoading.value = false
          openMessage({ content: msg, status: 'error' })
        })
        .catch((error) => {
          openMessage({ content: '系统异常', status: 'error' })
          console.log(error)
          tableLoading.value = false
        })
    }
  })
}

const resetFormData = () => {
  xForm.value?.reset()
}

const submitEvent = () => {
  submitLoading.value = true
  const $table = xTable.value
  if ($table) {
    submitLoading.value = false
    showEdit.value = false
    if (selectRow.value) {
      axios
        .put('/api/attraction', formData)
        .then((res) => {
          const { code, msg } = res.data
          if (code === 200) {
            loadData()
            submitLoading.value = false
            resetFormData()
            openMessage({ content: '保存成功', status: 'success' })
            return
          }
          openMessage({ content: msg, status: 'error' })
        })
        .catch((error) => {
          openMessage({ content: '系统异常', status: 'error' })
          console.log(error)
          submitLoading.value = false
        })
    } else {
      axios
        .post('/api/attraction', formData)
        .then((res) => {
          const { code, msg } = res.data
          if (code === 200) {
            loadData()
            submitLoading.value = false
            openMessage({ content: '新增成功', status: 'success' })
            return
          }
          openMessage({ content: msg, status: 'error' })
        })
        .catch((error) => {
          openMessage({ content: '系统异常', status: 'error' })
          console.log(error)
          submitLoading.value = false
        })
    }
  }
}

const page = reactive({
  currentPage: 1,
  pageSize: 10,
  totalResult: 200
})

const loadData = () => {
  tableLoading.value = true
  axios
    .get(
      '/api/attraction/page?name=' +
        searchFromData.name +
        '&pageNum=' +
        page.currentPage +
        '&pageSize=' +
        page.pageSize
    )
    .then((res) => {
      const { code, msg, data } = res.data
      if (code === 200) {
        tableData.value = data.list as RowVO[]
        page.totalResult = data.total
        tableLoading.value = false
        return
      }
      openMessage({ content: msg, status: 'error' })
    })
    .catch((error) => {
      openMessage({ content: '系统异常', status: 'error' })
      console.log(error)
      tableLoading.value = false
    })
}
onBeforeMount(() => {
  loadData()
})

const pageChange = () => {
  loadData()
}
</script>
